// 视频地址
import React, {useState} from "react";

interface VideoParamsProps {
    videoPath: string;      // 视频地址
    outputDir: string;      // 输出目录
    zoom: number;            // 缩放比例
    fps: number;             // 帧率
    start: number;            // 开始时间
    end: number;              // 结束时间
    width: number;            // 输出图片宽度
    height: number;           // 输出图片高度
    outputType: string;       // 输出图片方式([zoom]、 [width, height])
}

const VideoParser: React.FC = () => {

    const [videoParseParams, setVideoParseParams] = useState<VideoParamsProps>({
        videoPath: '/Users/zhanghao/Movies/htz-c/1.mp4',
        outputDir: '/Users/zhanghao/PycharmProjects/luck-coder/ultralytics/project/demo/train-folder/video/htz-c',
        zoom: 1,
        fps: 30,
        start: 0,
        end: 0,
        width: 0,
        height: 0,
        outputType: 'zoom'
    });

    // 解析视频为帧图片
    const parseVideo = async () => {
        if (!videoParseParams.videoPath) return;
        const response = await fetch('/api/video', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                ...videoParseParams
            }),
        });

        if (response.ok) {
            const data = await response.json();

            const imagesResponse = await fetch('/api/images', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    outputDir: data.outputDir,
                }),
            });

            if (imagesResponse.ok) {
                const imagesData = await imagesResponse.json();
                console.log('图片已经提取', imagesData.images);
                setVideoParseParams({...videoParseParams, outputDir: data.outputDir})
            }
        } else {
            console.error('解析失败');
        }
    }

    return (


        <div className="flex ">
            <div className="form-control flex space-x-4 mt-1.5 w-1/2 ">
                <div className="input-group w-full">
                    <label className="input input-sm w-full flex items-center gap-2">
                        <input type="text" placeholder="Search…" className="grow"
                               onChange={(event) => setVideoParseParams({
                                   ...videoParseParams,
                                   videoPath: event.target.value
                               })}
                               value={videoParseParams.videoPath}/>
                        <span className="badge badge-info">视频地址</span>
                    </label>
                    <label className="input input-sm w-w-full flex items-center gap-2">
                        <input type="text" placeholder="Search…" className="grow"
                               onChange={(event) => setVideoParseParams({
                                   ...videoParseParams,
                                   outputDir: event.target.value
                               })}
                               value={videoParseParams.outputDir}/>
                        <span className="badge badge-info">输出目录</span>
                    </label>
                    <label className="input input-sm w-w-full flex items-center gap-2">
                        <input type="number" placeholder="Search…" className="grow"
                               onChange={(event) => {
                                   setVideoParseParams({
                                       ...videoParseParams,
                                       fps: parseInt(event.target.value)
                                   });
                               }}
                               value={videoParseParams.fps}/>
                        <span className="badge badge-info">FPS</span>
                    </label>
                    <label className="input input-sm w-w-full flex items-center gap-2">
                        <input type="text" placeholder="Search…" className="grow"
                               onChange={(event) => {
                                   setVideoParseParams({
                                       ...videoParseParams,
                                       outputType: event.target.value
                                   });
                               }}
                               value={videoParseParams.outputType}/>
                        <span className="badge badge-info">outputType</span>
                    </label>
                    <label className="input input-sm w-w-full flex items-center gap-2">
                        <input type="number" placeholder="Search…" className="grow"
                               onChange={(event) => {
                                   setVideoParseParams({
                                       ...videoParseParams,
                                       zoom: parseFloat(event.target.value)
                                   });
                               }}
                               value={videoParseParams.zoom}/>
                        <span className="badge badge-info">ZOOM</span>
                    </label>

                    <label className="input input-sm w-w-full flex items-center gap-2">
                        <input type="number" placeholder="Search…" className="grow"
                               onChange={(event) => {
                                   setVideoParseParams({
                                       ...videoParseParams,
                                       width: parseFloat(event.target.value)
                                   });
                               }}
                               value={videoParseParams.width}/>
                        <span className="badge badge-info">width</span>
                    </label>

                    <label className="input input-sm w-w-full flex items-center gap-2">
                        <input type="number" placeholder="Search…" className="grow"
                               onChange={(event) => {
                                   setVideoParseParams({
                                       ...videoParseParams,
                                       height: parseFloat(event.target.value)
                                   });
                               }}
                               value={videoParseParams.height}/>
                        <span className="badge badge-info">height</span>
                    </label>

                    <button className="btn btn-sm" onClick={() => parseVideo()}>解析视频</button>
                </div>
            </div>
            <pre className=" mt-1.5 w-1/2">{JSON.stringify(videoParseParams, null, 2)}</pre>
        </div>
    )
        ;
}

export default VideoParser;